<template>
  <div class="base-card">
    <div class="card-header">
      <slot name="header">{{ header }}</slot>
    </div>
    <div class="card-body">
      <slot></slot>
    </div>
    <div class="card-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    header: {
      type: String,
      default: '',
    },
  },
});
</script>

<style scoped lang="less">
.base-card {
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  .card-header {
    padding: 12px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #ccc;
  }

  .card-body {
    padding: 12px;
  }

  .card-footer {
    padding: 12px;
    background-color: #f8f9fa;
    border-top: 1px solid #ccc;
  }
}
</style>